<template>
  <div class="app-container">
    <el-form status-icon :model="sysUser" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :label-position="labelPosition">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="sysUser.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" v-if="showPassword">
        <el-input type="password" v-model="sysUser.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPassword" v-if="showPassword">
        <el-input type="password" v-model="sysUser.checkPassword"></el-input>
      </el-form-item>
      <el-form-item label="是否管理员" prop="isSuper">
        <el-radio-group v-model="sysUser.isSuper">
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="部门" prop="deptId">
        <el-select v-model="sysUser.deptId" placeholder="请选择部门">
          <el-option label="一部门" value="1"></el-option>
          <el-option label="二部门" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="buttonDisabled" type="primary" @click="submitForm('ruleForm')">{{ submitFormText }}</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import userApi from '@/api/acl/sysUser'

export default {
  data() {

    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.sysUser.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      // 对齐方式
      labelPosition: 'right',
      // 保存按钮是否禁用
      buttonDisabled: false,
      showPassword: true,
      submitFormText: '新增',
      sysUser: {},
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 6, max: 32, message: '长度在 5 到 32 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur'}
        ],
        checkPassword: [
          { required: true, trigger: 'blur', validator: validatePass }
        ],
        isSuper: [
          { required: true, message: '请选择是否管理员', trigger: 'change' }
        ],
        deptId: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
      }
    };
  },

  watch: {
    $route(to, from) {
      console.log('监听器：路由变化......', " to->" + to, " from->" + from)
      this.init()
    }
  },

  created() {
    this.init()
  },

  methods: {

    init() {
      if (this.$route.params && this.$route.params.id) {
        this.showPassword = false
        this.submitFormText = '修改'
        const id = this.$route.params.id
        this.findById(id)
      } else {
        this.sysUser = {}
      }
    },

    findById(id) {
      userApi.findById(id).then(response => {
        this.sysUser = response.data.item
        // el-radio单选框或el-select选择框 不回显问题
        this.sysUser.isSuper = JSON.stringify(this.sysUser.isSuper)
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 防止表单重复提交
          this.saveBtnDisabled = true
          if (!this.sysUser.id) {
            this.saveSysUser()
          } else {
            this.updateSysUser()
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    saveSysUser() {
      userApi.saveSysUser(this.sysUser).then(response => {
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.$router.push({ path: '/acl/user/list' })
        }
      })
    },
    updateSysUser() {
      userApi.updateById(this.sysUser).then(response => {
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.$router.push({ path: '/acl/user/list' })
        }
      })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.demo-ruleForm {
  width: 460px;
}
</style>
